<template>
	<div id="" >
		<span id="1" style="display: none;">
			{{current.userId}}
		</span>
		
		<div class="updatep">
			<h3>修改信息</h3>
			<van-form @submit="onSubmit">
			  <van-field
			    v-model="student.name"
			    name="姓名"
			    label="姓名"
			    placeholder="姓名"
			  />
			  <van-field
			    v-model="student.tel"
			    name="联系电话"
			    label="联系电话"
			    placeholder="联系电话"
			  />
			  <van-field
			    v-model="student.email"
			    name="电子邮箱"
			    label="电子邮箱"
			    placeholder="电子邮箱"
			  />
			  <van-field
			    v-model="student.secId"
			    name="身份证号码"
			    label="身份证号码"
			    placeholder="身份证号码"
			  />
			  <van-field
			    v-model="student.address"
			    name="联系地址"
			    label="联系地址"
			    placeholder="联系地址"
			  />
			  <van-field
			    v-model="student.degree"
			    name="学历"
			    label="学历"
			    placeholder="学历"
			  />
			  <van-field v-model="student.birth" label="出生日期" @click="showPopFn1()" placeholder="选择的日期结果" readonly />
			  <van-popup v-model="show1" position="bottom" :style="{ height: '40%' }">
			     <van-datetime-picker v-model="currentDate1" :min-date="minDate" :max-date="maxDate" type="date" @change="changeFn1()" @confirm="confirmFn1()" @cancel="cancelFn1()" />
			  </van-popup>
			  <van-field
			    v-model="student.major"
			    name="专业"
			    label="专业"
			    placeholder="专业"
			  />
			  <van-field
			    v-model="student.graduate"
			    name="毕业院校"
			    label="毕业院校"
			    placeholder="毕业院校"
			  />
			  <van-field v-model="student.graduateTime" label="毕业时间" @click="showPopFn()" placeholder="选择的日期结果" readonly />
			  <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
			     <van-datetime-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()" />
			  </van-popup>
			  
			  <van-field
			    name="身份证正面"
			    label="身份证正面"
			    placeholder="身份证正面"
			  >
			  <template #input>
				<van-image
				  :src="student.secFrontUrl"
				 />
				   <!-- 文件上传 身份证正面-->
				  <div v-if="student.secFrontUrl != null">
				    <div class="demo-upload-list-cover">
				      <Icon
				        type="ios-trash-outline"
				        @click.native="handleRemove"
				      ></Icon>
				    </div>
				  </div>
				  <Upload
				    with-credentials
				    :max-size="2048"
				    :show-upload-list="false"
				    name="file"
				    ref="upload"
				    :format="['jpg', 'jpeg', 'png']"
				    :data="{ module: 'idcard', date: new Date() }"
					:before-upload="beforeUpload"
				    :on-format-error="handleFormatError"
				    :on-exceeded-size="handleMaxSize"
				    :on-success="handleSuccess"
				    :on-remove="handleRemove"
				    :action="url"
				  >
				    <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
				      >上传</Button
				    >
				  </Upload>
			    </template>
			  </van-field>
			  
			  <van-field
			    name="身份证背面"
			    label="身份证背面"
			    placeholder="身份证背面"
			  >
			  <template #input>
			  	<van-image
			  	  :src="student.secBackUrl"
			     />
				 <!-- 身份证反面 -->
				 <div v-if="student.secBackUrl != null">
				   <div class="demo-upload-list-cover">
				     <Icon
				       type="ios-trash-outline"
				       @click.native="handleRemoveBack"
				     ></Icon>
				   </div>
				 </div>
				 <Upload
				   with-credentials
				   :max-size="2048"
				   name="file"
				   :show-upload-list="false"
				   ref="upload"
				   :format="['jpg', 'jpeg', 'png']"
				   :data="{ module: 'idcard', date: new Date() }"
				   :on-format-error="handleFormatError"
				   :on-exceeded-size="handleMaxSize"
				   :on-success="handleSuccessBack"
				   :on-remove="handleRemoveBack"
				   :action="url"
				 >
				   <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
				     >上传</Button
				   >
				 </Upload>
			    </template>
			  </van-field>
			  
			  <van-field
			    name="手持身份证"
			    label="手持身份证"
			    placeholder="手持身份证"
			  >
			  <template #input>
				  <van-image
				    :src="student.secHandleUrl"
				   />
				<!-- 身份证手持 -->
				<div v-if="student.secHandleUrl != null">
				  <div class="demo-upload-list-cover">
				    <Icon
				      type="ios-trash-outline"
				      @click.native="handleRemoveHand"
				    ></Icon>
				  </div>
				</div>
				<Upload
				  with-credentials
				  :max-size="2048"
				  :show-upload-list="false"
				  name="file"
				  ref="hand"
				  :format="['jpg', 'jpeg', 'png']"
				  :data="{ module: 'idcard', date: new Date() }"
				  :on-format-error="handleFormatError"
				  :on-exceeded-size="handleMaxSize"
				  :on-success="handleSuccessHand"
				  :on-remove="handleRemoveHand"
				  :action="url"
				>
				  <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
				    >上传</Button
				  >
				</Upload>
			    </template>	  
			  </van-field>
			  <div style="margin: 16px;">
			    <van-button round block type="info" native-type="submit">提交</van-button>
			  </div>
			</van-form>
		</div>
		
		<tabbar></tabbar>
		<div style="height: 3rem;"></div>
	</div>
	
</template>

<script>
	import tabbar from '../../src/components/tarbar.vue'
	import store from '../../common/store.js'
	import { Toast } from 'vant';
	export default {
	  data() {
	    return {
		url: '',
		iport: '',
		 minDate: new Date(1970,0,1),
		 maxDate: new Date(2500,11,31),	
	     currentDate: new Date(),
	     changeDate: new Date(),
	     show: false, // 用来显示弹出层
		 currentDate1: new Date(),
		 changeDate1: new Date(),
		 show1: false,
	     userId:'',
	     currentUser:{},
		student:{   
			id:'',
			name:'',
			secId:'',
			secFrontUrl: null,
			secBackUrl: null,
			secHandleUrl: null,
			tel: "",
			account: "",
			accountTel: "",
			address: "",
			degree: "",
			major: "",
			graduate: "",
			birth:  '',
			graduateTime:  '',
			email:  '',
			secFrontUrl:"",
			secBackUrl:"",
			secHandleUrl:"",
			account: "",
			accountTel: "",	 
		 },
		user:{},
	    };
	  },
	  components: {
	    tabbar,
	  },
	  methods:{
		  //图片上传时文件格式错误方法
		  handleFormatError(file) {
		    Toast(
		        '文件 ' +
		        file.name +
		        ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
		    )
		  },
		  //校验图片的大小，不能大于2M
		  handleMaxSize: function(file) {
		   Toast(
		      '文件 ' + file.name + ' 太大，不能超过 2M。'
		    )
		  },
		  
		  handleRemove(file) {
		    // 从 upload 实例删除数据 正面
		    this.$data.student.secFrontUrl = null
		  },
		  handleRemoveBack(file) {
		    // 从 upload 实例删除数据 反面
		    this.$data.student.secBackUrl = null
		  },
		  handleRemoveHand(file) {
		    // 从 upload 实例删除数据 手持
		    this.$data.student.secHandleUrl = null
		  },
		  
		  //上传成功后的勾子 正面
		  handleSuccess: function(response, file, fileList) {
		    this.$data.student.secFrontUrl = response.DATA.URL
		  },
		  //上传成功后的勾子 反面
		  handleSuccessBack: function(response, file, fileList) {
		    this.$data.student.secBackUrl = response.DATA.URL
		  },
		  //上传成功后的勾子 反面
		  handleSuccessHand: function(response, file, fileList) {
		    this.$data.student.secHandleUrl = response.DATA.URL
		  },
		  search:function(){
			  this.http
			      .get({
					  url:`/system/student/info/${this.$data.userId}`
				  }).then((data)=>{
					  this.$data.student.id = data.student.id
					  this.$data.student.secId = data.student.secId
					  this.$data.student.name = data.student.name
					  this.$data.student.tel = data.student.tel
					  this.$data.student.email = data.student.email
					  this.$data.student.address = data.student.address
					  this.$data.student.degree = data.student.address
					  this.$data.student.major = data.student.major
					  this.$data.student.graduate = data.student.graduate
					  this.$data.student.major = data.student.major
					  this.$data.student.birth = data.student.birth
					  this.$data.student.graduateTime = data.student.graduateTime
					  this.$data.student.secBackUrl = data.student.secBackUrl
					  this.$data.student.secFrontUrl = data.student.secFrontUrl
					  this.$data.student.secHandleUrl = data.student.secHandleUrl
					  this.$data.user = data.user
				  })
		  },
		  onSubmit:function(){
			  this.http
			      .put({
					  url:'/system/student/info/update',
					  param:{
						  studentStr : this.$data.student,
						  userStr : this.$data.user
					  }
				  }).then((data) => {
					  Toast.success("修改成功")
					  this.search()
				  })
			  

		  }
	  },
	  created:function(){
	  	this.iport = this.$store.state.iport
	  	this.url = this.iport + 'oss/file/upload'
	  },
	  mounted() {
	  	this.$data.userId = this.$data.currentUser.user.userId
		this.search()
	  },
	  computed: {
	  	current: function() {
	  		this.$data.currentUser = store.state.currentUser
	  		return store.state.currentUser
	  	},
	  },
	};
	
</script>


<style scoped>
	.updatep h3{
		margin:10px;
		text-align: center;
		
	}
</style>
